<!-- Template for a normal list item -->
<dnd-nodrag draggable="true">
  <div class="row">
    <div class="col-md-1">
      <div dnd-handle class="handle">:::</div>
    </div>
    <div
      class="col-md-11"
      data-bs-toggle="collapse"
      data-bs-target="#details-{{item.title}}"
    >
      <a class="btn-link" ng-bind="$ctrl.translate(item.title)"> </a>
    </div>
  </div>
</dnd-nodrag>
<div
  ng-if="item.subMenus && item.subMenus.data.length"
  ng-show="$ctrl.models.selected === item || item.subMenus.allowedTypes.indexOf($ctrl.models.selected.menuType) !== -1"
  style="margin-top: 10px"
  ng-init="model = item.subMenus"
  ng-include="'/mix-app/views/appportal/pages/app-settings/components/portal-menus/container.html'"
></div>
<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-11" ng-show="$ctrl.models.selected === item">
    <div class="mb-3">
      <label class="form-label">Title</label>
      <input type="text" ng-model="item.title" class="form-control" />
    </div>
    <div class="mb-3">
      <label class="form-label">Translate Keyword</label>
      <input type="text" ng-model="item.keyword" class="form-control" />
    </div>
    <div class="mb-3">
      <label class="form-label">Uri</label>
      <input type="text" ng-model="item.uri" class="form-control" />
    </div>
    <div class="mb-3">
      <label class="form-label">Icon</label>
      <mix-select-icons
        prefix="'fab'"
        options="$ctrl.icons"
        data="item.icon"
      ></mix-select-icons>
    </div>
  </div>
</div>
